/*
 * @Author: Otway
 * @Date: 2019-01-09 11:16:08
 * @LastEditors: Otway
 * @LastEditTime: 2019-08-30 18:50:09
 * @copyright: h-visions
 */
import React, { Component } from 'react';
import {
  Row,
  Col,
  Form,
  Input,
  notification,
  Upload,
  Button,
  Icon,
  Modal,
  Select,
  Cascader
} from 'antd';
const FormItem = Form.Item;
const { Option } = Select;
const formItemLayout = {
  // 抽屉里面Form。二列的布局比例
  labelCol: {
    span: 8
  },
  wrapperCol: {
    span: 16
  }
};

class AddDetailFrom extends Component {
  constructor(props) {
    super(props);
    this.state = {
      batchNo: '',
    }
  }

  onChange = (value, type) => {
    const {
      form: { getFieldDecorator, setFieldsValue },
    } = this.props;
    setFieldsValue({ [type]: value })
  }

  render() {
    const {
      formData,
      form: { getFieldDecorator, setFieldsValue },
      warehouseList,
      assemblyGroupList,
    } = this.props;
    // console.log(formData, 'AddDetailFrom');
    return (
      <Form >
        <Row>
          <Col span={24}>
            <FormItem {...formItemLayout} label={'批号'}>
              {getFieldDecorator('batchNo', {
                initialValue: formData.batchNo || '',
                getValueFromEvent: (event) => {
                  return event.target.value.replace(/\s+/g, "")
                },
              })(<Input disabled placeholder='请输入批号' allowClear />)}
            </FormItem>
          </Col>
          <Col span={24}>
            <FormItem label="机型"{...formItemLayout}>
              {getFieldDecorator('model', {
                initialValue: formData.model || undefined,
              })(
                <Input disabled placeholder='请输入机型' allowClear />
              )}
            </FormItem>
          </Col>
          <Col span={24}>
            <FormItem {...formItemLayout} label={'版本号'}>
              {getFieldDecorator('version', {
                initialValue: formData.version || '',
                getValueFromEvent: (event) => {
                  return event.target.value.replace(/\s+/g, "")
                },
              })(<Input disabled placeholder='请输入版本号' allowClear />)}
            </FormItem>
          </Col>
          <Col span={24}>
            <FormItem {...formItemLayout} label={'物料名称'}>
              {getFieldDecorator('partName', {
                initialValue: formData.partName || '',
                rules: [
                  {
                    required: true,
                    message: '请输入物料名称！'
                  }
                ],
                getValueFromEvent: (event) => {
                  return event.target.value.replace(/\s+/g, "")
                },
              })(<Input placeholder='请输入物料名称' allowClear />)}
            </FormItem>
          </Col>
          <Col span={24}>
            <FormItem {...formItemLayout} label={'物料编码'}>
              {getFieldDecorator('partCode', {
                initialValue: formData.partCode || '',
                rules: [
                  {
                    required: true,
                    message: '请输入物料编码！'
                  }
                ],
                getValueFromEvent: (event) => {
                  return event.target.value.replace(/\s+/g, "")
                },
              })(<Input placeholder='请输入物料编码' allowClear />)}
            </FormItem>
          </Col>
          <Col span={24}>
            <FormItem {...formItemLayout} label={'物料规格'}>
              {getFieldDecorator('partSpec', {
                initialValue: formData.partSpec || '',
                // rules: [
                //   {
                //     required: true,
                //     message: '请输入物料规格！'
                //   }
                // ],
                getValueFromEvent: (event) => {
                  return event.target.value.replace(/\s+/g, "")
                },
              })(<Input placeholder='请输入物料规格' allowClear />)}
            </FormItem>
          </Col>
          <Col span={24}>
            <FormItem {...formItemLayout} label={'装配组别'}>
              {getFieldDecorator('assemblyGroup', {
                initialValue: formData.assemblyGroup || undefined,
                // rules: [
                //   {
                //     required: true,
                //     message: '请选择装配组别！'
                //   }
                // ],
              })(
                <Input placeholder='请输入装配组别' allowClear />
                // <Select placeholder='请选择装配组别'
                //   allowClear
                //   optionFilterProp="children"
                //   showSearch
                //   filterOption={(input, option) =>
                //     option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                //   }
                // // onChange={(value) => this.onChange(value, 'groupCode')}
                // >
                //   {
                //     assemblyGroupList.map(item => {
                //       return <Option key={item.groupCode}>{item.groupName}</Option>
                //     })
                //   }
                // </Select>
              )}
              {/* {getFieldDecorator('assemblyGroup', {
                initialValue: formData.assemblyGroup || '',
                rules: [
                  {
                    required: true,
                    message: '请输入装配组别！'
                  }
                ],
                getValueFromEvent: (event) => {
                  return event.target.value.replace(/\s+/g, "")
                },
              })(<Input placeholder='请输入装配组别' allowClear />)} */}
            </FormItem>
          </Col>
          <Col span={24}>
            <FormItem {...formItemLayout} label={'组别代号'}>
              {getFieldDecorator('groupCode', {
                initialValue: formData.groupCode || undefined,
                // rules: [
                //   {
                //     required: true,
                //     message: '请选择组别代号！'
                //   }
                // ],
              })(
                <Input placeholder='请输入组别代号' allowClear />
                // <Select placeholder='请选择组别代号'
                //   allowClear
                //   optionFilterProp="children"
                //   showSearch
                //   filterOption={(input, option) =>
                //     option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                //   }
                // // onChange={(value) => this.onChange(value, 'assemblyGroup')} 
                // >
                //   {
                //     assemblyGroupList.map(item => {
                //       return <Option key={item.groupCode}>{item.groupCode}</Option>
                //     })
                //   }
                // </Select>
              )}
              {/* {getFieldDecorator('groupCode', {
                initialValue: formData.groupCode || '',
                rules: [
                  {
                    required: true,
                    message: '请输入组别代号！'
                  }
                ],
                getValueFromEvent: (event) => {
                  return event.target.value.replace(/\s+/g, "")
                },
              })(<Input placeholder='请输入组别代号' allowClear />)} */}
            </FormItem>
          </Col>
          <Col span={24}>
            <FormItem {...formItemLayout} label={'仓库名称'}>
              {getFieldDecorator('storeName', {
                initialValue: formData.storeName || undefined,
                rules: [
                  {
                    required: true,
                    message: '请选择仓库！'
                  }
                ],
              })(<Select
                allowClear
                placeholder='请选择仓库'
                showSearch
                filterOption={(input, option) =>
                  option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                }>
                {
                  warehouseList.map(item => {
                    return <Option key={item.name}>{item.name}</Option>
                  })
                }
              </Select>)}
            </FormItem>
          </Col>
          <Col span={24}>
            <FormItem {...formItemLayout} label={'需求数量'}>
              {getFieldDecorator('partNeedNum', {
                initialValue: formData.partNeedNum || '',
                rules: [
                  {
                    required: true,
                    message: '请输入需求数量！'
                  }
                ],
                getValueFromEvent: (event) => {
                  return event.target.value.replace(/\s+/g, "")
                },
              })(<Input placeholder='请输入需求数量' allowClear />)}
            </FormItem>
          </Col>
          <Col span={24}>
            <FormItem {...formItemLayout} label={'图号'}>
              {getFieldDecorator('paperCode', {
                initialValue: formData.paperCode || '',
                getValueFromEvent: (event) => {
                  return event.target.value.replace(/\s+/g, "")
                },
              })(<Input placeholder='请输入图号' allowClear />)}
            </FormItem>
          </Col>
          {/* <Col span={24}>
            <FormItem label='部门' {...formItemLayout}>
              {
                getFieldDecorator('departmentId', {
                  initialValue: formData.departmentId || undefined,
                  rules: [
                    {
                      required: true,
                      message: '请选择部门'
                    }
                  ]
                })(
                  <Cascader options={this.props.options}>
                  </Cascader>
                )
              }
            </FormItem>
          </Col> */}
        </Row>
      </Form>
    );
  }
}

export default Form.create()(AddDetailFrom);
